<template>
  <div>
    <!-- 目录子组件 -->
    <el-dialog :visible="show" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="close" :title="form.id?'修改目录':'新增目录'" >
      <el-form ref="formRef" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="所属学科" prop="name">
          <el-input v-model="form.directoryName" placeholder="请输入权限标识" clearable :style="{width:'100%'}"></el-input>
        </el-form-item>
        <el-form-item label="目录名称" prop="Discipline">
          <el-select v-model="form.subjectID" placeholder="请选择下拉选择" clearable :style="{width:'100%'}">
            <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm" >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { simple as getSubjects } from '@/api/hmmm/subjects.js'

import { add as addDirectorys,update as modifyDirectorys } from '@/api/hmmm/directorys.js'
export default {
  inheritAttrs: false,
  components: {},
  props: {
    id: {
      type: Number,
      default:undefined
    },
    row: {
      type: Object,
      default:undefined
    }
  },
  data() {
    return {
      // 弹框组件的状态值
      list: [],
      newid:this.id,
      subjectdata:{
        pagesize:1000
      },
      show: false,
      form: {
        subjectID: undefined,
        directoryName:''
      },
      // 检验规则
      rules: {
        directoryName: [{
          required: true,
          message: '请输入权限标识',
          trigger: 'blur'
        }],
        subjectID: [{
          required: true,
          message: '请选择下拉选择',
          trigger: 'change'
        }],
      },
      
      field106Options: [{
        label: "",
        value: ""
      }, {
        label: "",
        value: ""
        },],
     
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getSubjects()
  },
  mounted() {},
  methods: {
    // 获取学科列表
   async getSubjects () {
      const items = await getSubjects(this.subjectdata)
      console.log(items)
      this.list = items.data
      console.log(this.list)
    },
    // 显示弹框
    onOpen () {
      this.show= true
    },
    // 通过父组件调用子组件方法回显数据
    modify (row) {
      // this.$nextTick()
      this.form = row
    },
  // 关闭弹框
    close () {
      this.show =false
      this.$emit('update:visible', false)
      this.$refs['formRef'].resetFields()
      this.form = {
        subjectID: undefined,
        directoryName:''
      }
    },
    // 点击确定
    handelConfirm () {
      // console.log(this.newid)
      this.$refs['formRef'].validate(async valid => {
        if (!valid) return
        // 有id是编辑
        if (this.form.id) {
          console.log(this.id)
           await modifyDirectorys({
            subjectID: this.form.subjectID,
            directoryName: this.form.directoryName,
            id:this.form.id
           })
        } else {
          // 没有id是新增
           await addDirectorys(this.form)
        }
        // 新增列表
        // 让form表单清空
        this.form = {
        subjectID: undefined,
        directoryName:''
        }
          //  this.id = undefined
        // 通知父组件刷新
        this.$emit('onadd')
        // 提示成功
        this.$message.success('操作成功')
        this.close()
      })
    },
  }
}

</script>
<style scoped lang="scss">
::v-deep .el-dialog{
  width: 30%;
}
</style>

